<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6" class="home-col">
        <CommonCard title="今日销售额" :value="homeData.salesToday">
          <div>
            日同比 {{ homeData.salesGrowthLastDay }}%
            <el-icon color="red">
              <CaretBottom />
            </el-icon>
          </div>
          <div>
            月同比 {{ homeData.salesGrowthLastMonth }}%
            <el-icon color="green">
              <CaretTop />
            </el-icon>
          </div>
          <template #footer>
            <div>昨日销售额¥ {{ homeData.salesLastDay }}</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="home-col">
        <CommonCard title="今日订单" :value="homeData.orderToday">
          <LineChart
            :data="homeData.orderTrend"
            :axis="homeData.orderTrendAxis"
          />
          <template #footer>
            <div>昨日订单量¥ {{ homeData.orderLastDay }}</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="home-col">
        <CommonCard title="今日交易用户数" :value="homeData.orderUser">
          <BarChart />
          <template #footer>
            <div>退货率{{ homeData.returnRate }}%</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" class="home-col">
        <CommonCard title="累计用户数" :value="homeData.usersTotal">
          <ProgressChart />
          <template #footer>
            <div>
              日同比 {{ homeData.userGrowthLastDay }}%
              <el-icon color="red"><CaretBottom /></el-icon>
              月同比 {{ homeData.userGrowthLastMonth }}%
              <el-icon color="green"><CaretTop /></el-icon>
            </div>
          </template>
        </CommonCard>
      </el-col>
    </el-row>

    <SalesVisited
      :orderFullYearAxis="homeData.orderFullYearAxis"
      :orderFullYear="homeData.orderFullYear"
      :userFullYearAxis="homeData.userFullYearAxis"
      :userFullYear="homeData.userFullYear"
    />

    <CategoryRank
      :category="homeData.saleRank.category"
      :goods="homeData.saleRank.goods"
    />

    <BMap />

    <EchartsMap />
  </div>
</template>

<script lang="ts">
export default {
  name: "XHome",
};
</script>
<script lang="ts" setup>
import { CaretBottom, CaretTop } from "@element-plus/icons-vue";
import CommonCard from "./components/CommonCard.vue";
import LineChart from "./components/LineChart.vue";
import BarChart from "./components/BarChart.vue";
import ProgressChart from "./components/ProgressChart.vue";
import SalesVisited from "./components/SalesVisited.vue";
import CategoryRank from "./components/CategoryRank.vue";
import BMap from "./components/BMap.vue";
import EchartsMap from "./components/EchartsMap.vue";
import { ref, onMounted } from "vue";
import { getHomeDataApi } from "@/api/home";

const homeData = ref<any>({
  // "//1": "今日销售额",
  salesToday: 0,
  salesLastDay: 0,
  salesGrowthLastDay: 0,
  salesGrowthLastMonth: 0,

  // "//2": "今日订单量",
  orderToday: 0,
  orderLastDay: 0,
  orderTrend: [],
  orderTrendAxis: [],

  // "//3": "今日交易用户数",
  orderUser: 0,
  returnRate: 0,
  orderUserTrend: [],
  orderUserTrendAxis: [],

  // "//4": "累计用户数",
  usersTotal: 0,
  usersLastMonth: 0,
  userGrowthLastDay: 0,
  userGrowthLastMonth: 0,

  // "//5": "销售额与访问量",
  orderFullYearAxis: [],
  orderFullYear: [],
  userFullYearAxis: [],
  userFullYear: [],

  // "//8": "分类销售排行",
  saleRank: {
    category: {
      axisX: [],
      data1: [],
    },
    goods: {
      axisX: [],
      data1: [],
    },
  },
});

onMounted(async () => {
  homeData.value = await getHomeDataApi();
});
</script>

<style scoped>
.home-col {
  margin-bottom: 10px;
}
</style>
